iT邦幫忙

2025 iThome 鐵人賽

DAY 29
0
自我挑戰組

攜手 AI 從零開始打造一款 Flutter 應用程式系列 第 29

Day 29: 專案總回顧 - 從零到一的 Flutter x AI 之旅

  • 分享至 

  • xImage
  •  

前言

不知不覺,我們的鐵人賽旅程已來到第 29 天。回首 Day 1,我們只有一個簡單的想法:「結合 Flutter 與 AI,打造一款能用的 App」。那時,我們的眼前還是一片空白的畫布。

如今,再次打開專案,一個功能完整、架構清晰、具備雲端儲存與 AI 智慧的應用程式——「省錢拍拍」已然成形。

今天,我們不寫新功能。讓我們先泡杯咖啡,放慢腳步,一同回顧這趟橫跨四週的開發之旅,盤點我們經歷的階段、掌握的技術,以及那些讓我們成長的挑戰。

我們的開發旅程:四大階段回顧

第一階段:基礎建設與 UI 奠基 (約 Day 1 - Day 7)

這是我們打下堅實基礎的一週。我們從最核心的概念出發,確保每一步都穩紮穩打。

  • 核心技術Dart 語言基礎Stateless/StatefulWidgetColumn/Row/Container 佈局、ListView.builder 動態列表。
  • 關鍵成果:我們不僅建立了開發環境,更重要的是掌握了 Flutter 「萬物皆 Widget」的核心思想,並利用 ThemeDatagoogle_fonts 為 App 打造了第一件客製化的外衣。

第二階段:後端整合與資料閉環 (約 Day 8 - Day 14)

這一階段,我們為 App 裝上了「大腦」和「記憶」,讓它從靜態的展示品,蛻變為可以互動的工具。

  • 核心技術Form 表單處理、Navigator 頁面導航、setState 基礎狀態管理、Firebase Auth 使用者驗證、Firestore 資料庫設計 (子集合模型)、CRUD (新增/讀取/更新/刪除) 操作。
  • 關鍵成果:我們成功地讓使用者能夠註冊登入,並將資料永久儲存到雲端。透過重構出 FirestoreService,我們學習了分離 UI 與業務邏輯的重要架構原則,並透過滑動刪除 (Dismissible) 讓 App 的互動體驗更上一層樓。

第三階段:AI 賦能 - 讓應用程式學會思考 (約 Day 15 - Day 20)

這是整個系列最令人興奮的篇章。我們不再滿足於傳統的 App 功能,而是大膽地擁抱了生成式 AI。

  • 核心技術image_picker 硬體互動、google_ml_kit 光學字元辨識 (OCR)、google_generative_ai (Gemini API)、Prompt Engineering 提示工程、JSON 解析。
  • 關鍵成果:我們走完了從「拍照 -> 辨識 -> AI 分析 -> 預填表單」的完整智慧流程,讓 App 的核心體驗產生了質的飛躍。我們更進一步,讓 Gemini 扮演「理財顧問」,對多筆資料進行分析,展現了 AI 在資料洞察上的巨大潛力。

第四階段:專案打磨與安全加固 (約 Day 21 - Day 28)

在最後階段,我們從「開發者」切換到「產品發布者」的視角,專注於提升 App 的專業度與安全性。

  • 核心技術Stream 即時數據聚合、UI/UX 細節優化 (如 DropdownButtonFormField, GlobalKey)、Firestore 安全規則、flutter_dotenv 環境變數、flutter_launcher_iconsflutter_native_splash 客製化。
  • 關鍵成果:我們優化了使用者介面,建立了統一的回饋系統,並讓總支出卡片實現了即時更新。更重要的是,我們為資料庫上了鎖、保護了 API 金鑰,確保 App 在上架前達到基本的安全標準,並完成了 Android 的發布版打包。

挑戰與學習反思

  • const 的重要性:我們在過程中多次因為 const 關鍵字的濫用或遺漏而修正程式碼。這讓我們深刻體會到它對 Flutter 性能優化和編譯時檢查的價值,也學會了判斷使用時機。
  • 架構的威力:Day 13 的重構(建立 Service 層)看似沒有增加新功能,但卻是後續 AI 功能能夠順利、乾淨地整合進來的關鍵。一個好的架構,能讓複雜的系統依然保持清晰。
  • 迭代與修正:我們的開發過程並非一帆風順,從 gemini_service 的 Prompt 優化,到 firestore_service 的名稱衝突修正,我們不斷地在迭代中完善程式碼。這正是真實軟體開發的縮影——不斷試錯,不斷改進。

今日結語

從一個空白的資料夾,到一個功能齊全、AI 賦能的 App,這 29 天的旅程充滿了挑戰與收穫。我們不僅僅是堆砌了程式碼,更是完整地實踐了一場「產品思維」的旅程——從概念發想、技術選型、功能實現、架構重構,到最後的安全與發布準備。

感謝每一位跟隨至此的讀者。是你們的陪伴,讓這趟旅程更具意義。

明天,在我們鐵人賽的最終章,我將分享一些關於這個專案的最終感想,並暢想一下「省錢拍拍」還能有哪些更有趣的發展,為這次的系列畫下一個完美的句點。


上一篇
Day 28: 保護你的金鑰 - 使用環境變數管理 API Key
系列文
攜手 AI 從零開始打造一款 Flutter 應用程式29
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言